<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>响应</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/grid.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <header class="header-container">
        <div class="container">
            <div class="row">
                <!-- 有三列，两列切换显示 -->
                <!-- ！屏幕大小范围，className只需写清楚下限，根据移动优先与程序执行顺序 -->
                <div class="header-logo-container col-8 col-md-3">
                    <a href="###" class="header-logo">
                        <img src="img/logo.svg" alt="logo">
                    </a>
                </div>
                <div class="header-btn-container col-4 d-md-none">
                    <button type="button" class="btn-toggle" id="btn-toggle">
                        <span class="btn-toggle-bar"></span>
                        <span class="btn-toggle-bar"></span>
                        <span class="btn-toggle-bar"></span>
                    </button>
                </div>
                <div class="header-nav-container d-none col-md-9 d-md-block">
                    <ul class="header-nav">
                        <li class="header-nav-item"><a href="#" class="header-nav-link">手机&amp;平板</a></li>
                        <li class="header-nav-item"><a href="#" class="header-nav-link">电视&amp;影音</a></li>
                        <li class="header-nav-item"><a href="#" class="header-nav-link">生活家电</a></li>
                        <li class="header-nav-item"><a href="#" class="header-nav-link">电脑/办公/存储</a></li>
                        <li class="header-nav-item"><a href="#" class="header-nav-link">网上商城</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </header>
    <!-- nav -->
    <nav class="nav-container d-md-none" id="nav">
        <ul class="container">
            <li><a href="" class="nav-link">手机&amp;平板</a></li>
            <li><a href="" class="nav-link">电视&amp;影音</a></li>
            <li><a href="" class="nav-link">生活家电</a></li>
            <li><a href="" class="nav-link">电脑/办公/存储</a></li>
            <li><a href="" class="nav-link">网上商城</a></li>
        </ul>
    </nav>
    <div class="slider-container">
        <div class="container">
            <div class="row">
                <div class="slider-text-container col-md-5 col-md-push-7">
                    <h3 class="slider-title">Galaxy S9｜S9+</h3>
                    <h4 class="slider-subtitle">冰蓝 焕新上市</h4>
                    <div class="slider-btns">
                        <a href="" class="btn-rounded">了解更多</a>
                        <a href="" class="btn-rounded">立即购买</a>
                    </div>
                </div>
                <div class="col-md-7 col-md-pull-5">
                    <img src="img/1.png" alt="cellphone">
                </div>
            </div>
        </div>
    </div>
    <!-- <script src="" async defer></script> -->
    <script>
        var nav = document.getElementById('nav');
        var navExtendedClassName = 'nav-container-extended';

        document.getElementById('btn-toggle').onclick = function () {
            // nav.className += ' ' + navExtendedClassName;
            // !.classList获取classNames
            // ！.contains查看内容中是否有某名字
            // if (nav.classList.contains(navExtendedClassName)) { // 收起
            //     nav.classList.remove(navExtendedClassName);
            // } else { // 展开
            //     nav.classList.add(navExtendedClassName);
            // }
            if (nav.classList.contains(navExtendedClassName)) {
                nav.classList.remove(navExtendedClassName);
            } else {
                nav.classList.add(navExtendedClassName);
            }
        };
    </script>
</body>

</html>